<template>
  <ul class="screen-card-wrapper">
    <li v-for="(filter, filterIdx) in filters" :key="filterIdx" class="clearfix">
      <div v-for="(item, idx) in filter.values" :key="idx" 
      :class="{
        // bgLight: idx===filterChoiceIdx[filterIdx],
        colorBlue: item.value===query[filter.key]
      }"
      @click="chooseFilter(filterIdx, idx)">
        {{ item.cover }}
      </div>
      <span></span>
    </li>
  </ul>
</template>

<script>
  export default {
    props: {
      filters: {
        type: Array,
        default: () => {
          return [];
        }
      },
      query: {
        type: Object,
        default: () => ({})
      }
    },

    methods: {
      chooseFilter(filterIdx, idx) {
        this.$emit('chooseFilter', {
          filterIdx, idx
        })
      }
    },
    mounted () {
    },
  }
</script>

<style lang="less" scoped>
@w: var(--screenCardWidth);
@h: var(--screenCardHeight);

.screen-card-wrapper {
  width: @w;
  background-color: white;
  border-radius: 2px;

  li {
    --innerWidth: calc(@w * 0.9);
    position: relative;
    padding: calc(@w * 0.03) calc((@w - var(--innerWidth)) / 2);

    div {
      float: left;
      margin: calc(@w * 0.01) calc(@w * 0.01);
      padding: calc(@w * 0.01) calc(@w * 0.02);
      border-radius: calc(@w * 0.01);
      font-size: calc(@w * 0.03);

      &:hover {
        background-color: var(--light);
        cursor: pointer;
      }
    }

    &:not(:last-child) span {
      position: absolute;
      width: var(--innerWidth);
      height: 1px;
      background-color: var(--lightGray);
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>